<template>
  <div
    v-if="navList.length"
    style="position:relative"
    class="slide-nav-box"
    ref="slideNavBox"
  >
    <ul class="slide-nav-ul flex-wrap flex-multi-row" :class="customBoxClass">
      <li
        @click.stop="selectedItem($event, navItem, index)"
        v-for="(navItem, index) in navList"
        :key="index"
        :class="+navItem.type === +currentType ? 'slide-nav-li-active ' + customItemActiveClass : customItemClass"
        class="slide-nav-li"
        :style="navItemStyle"
        :data-value="index"
      >
        {{ navItem.label }}
      </li>
    </ul>
    <div
      class="slide-nav-bg"
      :style="{ ...bgStyle, background: activeBg }"
      :class="curtomBgClass"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'slideNav',
  props: {
    // 切换导航数据,在使用时 确保navList数据存在
    navList: {
      type: Array,
      default: () => []
    },
    // hover状态下的字体颜色
    hoverColor: {
      type: String,
      default: '#383838'
    },
    // 选中的背景色
    activeBg: {
      type: String,
      default: '#F7F7F7'
    },
    //每个nav的样式类
    navItemStyle: {
      type: Object,
      default: () => ({})
    },
    currentType: {
      type: [String, Number],
      default: 0
    },
    // 容器自定义类
    customBoxClass: {
      type: String,
      default: ''
    },
    // 自定义每个选中的item
    customItemActiveClass: {
      type: String,
      default: ''
    },
    // 自定义item
    customItemClass: {
      type: String,
      default: ''
    },
    // 自定义背景类
    curtomBgClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 背景的位置、大小样式
      bgStyle: {
        transform: `translate('0px')`,
        width: '0px',
        height: '0px'
      },
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  methods: {
    // 选中
    selectedItem($event, navItem, index) {
      if (navItem.type === this.currentType) return
      this.zlaBtn = {
        key_name: '切换展示',
        key_content: navItem.label
      }
      this.$emit('update:currentType', navItem.type)
      this.$nextTick(() => {
        this.setBgLocation()
        this.$emit('selectedNav', navItem)
      })
    },
    // 计算背景的宽高以及位置属性
    setBgLocation() {
      let activeItem = this.$refs.slideNavBox.querySelector(
        '.slide-nav-li-active'
      )
      let transform = `translate(${activeItem.offsetLeft}px)`
      let width = activeItem.offsetWidth + 'px'
      let height = activeItem.offsetHeight + 'px'
      let top = activeItem.offsetTop + 'px'
      this.bgStyle = { transform, width, height, top }
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setBgLocation()
    })
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.slide-nav-ul {
  position: relative;
}
.slide-nav-li {
  transition: all 0.5s ease;
  z-index: 1;
  background-color: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  padding: 7px 20px;
}
.slide-nav-li-active {
  color: #383838;
}
.slide-nav-li:hover {
  color: #383838;
}

.slide-nav-bg {
  transition: all 0.2s ease;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
</style>
